<template>
	<view>
		<view class="padding-tb padding-lr-lg bg-white top">
			<view class="text-sm">
				请描述您的需求，以便有专业人才联系您并为您服务
			</view>
			<textarea class="textarea" v-model="demand" placeholder="如,我需要设计Logo" />
			<view style="margin-left: -8rpx;">
				<u-upload :action="$store.state.upload" :header="header" :show-progress="false"
				 :form-data="{type: 'order'}" :max-count="9" @on-success="success" @on-remove="remove"></u-upload>
			</view>
		</view>
		
		<u-gap height="30"></u-gap>
		<view class="padding-lr bg-white">
			<view class="item">
				<text class="text">联系手机</text>
				<u-field v-model="mobile" :label-width="0" placeholder="请留下手机号，便于人才联系您">
				</u-field>
			</view>
		</view>
		
		<u-gap height="30"></u-gap>
		<view class="padding-lr bg-white">
			<view class="item bt">
				<text class="text">价格商议</text>
				<view class="flex-row align-center">
					<view class="flex-row align-center margin-right" @click="popup(1)">
						<image src="../../static/images/phone.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
						<text class="margin-left-xs">电话咨询</text>
					</view>
					<view class="flex-row align-center" @click="popup(2)">
						<image src="../../static/images/wechat.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
						<text class="margin-left-xs">微信咨询</text>
					</view>
				</view>
			</view>
			<view class="item">
				<text class="text-sm text-gray">注：因企划代理价格的范围性与选择性价格需根据具体需求进行商议</text>
			</view>
		</view>
		
		<u-gap height="30"></u-gap>
		<view class="padding-lr bg-white">
			<u-cell-group>
				<u-cell-item title="订单号:" :value="no" @click="copy(no)"></u-cell-item>
				<u-cell-item title="优惠券:" :value="discount" @click="couponShow=true" v-if="coupon.length"></u-cell-item>
				<u-cell-item title="优惠券:" value="无可用券" v-if="!coupon.length"></u-cell-item>
				<u-cell-item title="支付选项:" :value="payType[is_full].text" @click="showAction"></u-cell-item>
				<u-cell-item title="总价:" :arrow="false" :value="'￥' + finalPrice" :value-style="{ color: '#FF8B56', 'padding-right': '30rpx' }"></u-cell-item>
			</u-cell-group>
		</view>
		
		<u-action-sheet :list="payType" v-model="actionShow" @click="cgPayType"></u-action-sheet>
		
		<u-popup class="pop-coupon" v-model="couponShow" mode="bottom" width="670" height="800" border-radius="16">
			<view class="coupons">
				<my-coupon :type="i.type" :amount="i.amount" :threshold="i.threshold" :expire="i.expire_time" btn="立即使用"
				 v-for="i in coupon" :key="i.id" @click.native="setCoupon(i)"></my-coupon>
			</view>
		</u-popup>
		
		<my-btn gold style="margin: 60rpx auto" @click="create" :disabled="order.can_pay==0">确认订单</my-btn>
		
		<u-popup v-model="pop" mode="center" border-radius="8">
			<view class="padding text-center" style="width: 500rpx;">
				<view class="margin-top">{{copyData}}</view>
				<view class="text-orange text-lg margin-top" @click="copy">点击复制</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				no: '',
				is_full: 1,
				mobile: '',
				coupon: [],
				demand: '',
				code: '',
				type: '',
				tips: '获取验证码',
				pay: 0,
				id: '',
				pro: '',
				order: '',
				header: '',
				imgs: [],
				coupon_sn: '',
				couponShow: false,
				actionShow: false,
				payType: [
					{ text: '预付款', },
					{ text: '全款支付', }
				],
				pop: false,
				copyData: '',
			};
		},
		computed: {
			payment() {
				if (this.pay==1) return 'balance'
				if (this.pay==2) return 'alipay'
				if (this.pay==3) return 'wechat'
			},
			discount() {
				let coupon = this.coupon.find(item => item.coupon_sn == this.coupon_sn)
				return coupon ? '-￥'+coupon.amount : '选择优惠券'
			},
			finalPrice() {
				let init = this.order.total_price
				let coupon = this.coupon.find(item => item.coupon_sn == this.coupon_sn)
				let final = coupon ? init - coupon.amount : init
				if (this.order.can_pay>0) {
					return this.is_full ? final : (final * this.pro.downpayment / 100)
				} else {
					return '待商议'
				}
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.no = opt.no
			this.pay = 1
			this.getData();
			
			this.header = {
				Authorization: 'Bearer ' + this.$store.state.token
			}
		},
		onPullDownRefresh() {
			this.getData();
		},
		methods: {
			getData() {
				this.$u.get('/order/fill/info/'+this.no).then(res => {
					let { coupon, mobile, order, product } = res.data.result
					this.pro = product
					this.order = order
					this.mobile = mobile
					this.coupon = coupon
					
					uni.stopPullDownRefresh();
				})
			},
			codeChange(e) {
				this.tips = e
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$u.post('/code/mobile?type=reg', {
						mobile: this.mobile
					}).then(res => {
						uni.hideLoading();
						if (res.data.code == 0) {
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						} else {
							this.$u.toast(res.data.msg)
						}
					})
				} else {
					this.$u.toast('稍后再试');
				}
			},
			success(data, index, lists) {
				let img = {
					url: data.result.src
				}
				this.imgs.splice(index, 1, img)
			},
			remove(index, lists) {
				this.imgs.splice(index, 1)
			},
			create() {
				let data = {
					trade_no: this.no,
					demand: this.demand,
					contact_mobile: this.mobile,
					demand_img: this.imgs,
					coupon_sn: this.coupon_sn,
					is_full: this.is_full ? '1' : '0'
				}
				this.$u.post('/order/confirm', data).then(res => {
					this.$goto('/pages/order/pay?no=' + this.no, 'redirect')
				})
			},
			setCoupon(i) {
				this.coupon_sn = i.coupon_sn
				this.couponShow = false
			},
			cgPayType(e) {
				this.is_full = e
			},
			popup(e) {
				if (e == 1) {
					this.copyData = this.order.merchant.contact_mobile
				} else if (e == 2) {
					this.copyData = this.order.merchant.wechat
				}
				this.pop = true
			},
			copy(data) {
				if (data) {
					uni.setClipboardData({
						data: data,
						success: () => {
							this.$msg('复制成功');
							this.pop = false
						}
					});
				} else {
					uni.setClipboardData({
						data: this.copyData,
						success: () => {
							this.$msg('复制成功');
							this.pop = false
						}
					});
				}
			},
			showAction() {
				if (this.order.can_downpayment) {
					this.actionShow = true
				} else {
					this.is_full = 1
					this.$msg('当前订单只支持全款')
				}
			}
		}
	}
</script>

<style lang="scss">
	.top {
		border-top: 1px solid rgba(0,0,0,0.05);
	}
	.textarea {
		margin: 20rpx 0;
		width: 670rpx;
		height: 200rpx;
		background: rgba(245,245,245,1);
		box-sizing: border-box;
		border-radius: 8rpx;
		padding: 16rpx;
		font-size: 24rpx;
	}
	.item {
		min-height: 100rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		&.on {
			opacity: 0.7;
			transform: translate(1px, 1px);
		}
		&.bt {
			justify-content: space-between;
		}
		.text {
			min-width: 160rpx;
		}
		.radio {
			width: 40rpx;
			height: 40rpx;
			margin-right: 24rpx;
			background: url(../../static/images/ra0.png);
			background-size: 100% 100%;
			&.on {
				background: url(../../static/images/ra1.png);
				background-size: 100% 100%;
			}
		}
	}
</style>
